import React from 'react';
import {
  Button,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  createNavigator, //将路由器和导航视图组合在一起；
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
} from 'react-navigation';
import MyNavigation from './MyNavigation';

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <MyNavigation>{banner}</MyNavigation>
    <Button
      onPress={() => {
        navigation.goBack(null);
      }}
      title="Go back"
    />
  </ScrollView>
);

const MyHomeScreen = ({ navigation }) => (
  <MyNavScreen banner="Home Screen" navigation={navigation} />
);

const MyNotificationsScreen = ({ navigation }) => (
  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
);

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
);

const CustomTabBar = ({ navigation }) => {
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map(route => (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForRouteName(routes[index].routeName);
  return (
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
    </View>
  );
};

const CustomTabRouter = TabRouter(
  {
    Home: {
      screen: MyHomeScreen,
      path: '',
    },
    Notifications: {
      screen: MyNotificationsScreen,
      path: 'notifications',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Home',
  }
);

//这部分是custom routerAPI的使用；
const defaultGetStateForAction = CustomTabRouter.getStateForAction;
CustomTabRouter.getStateForAction = (action, state) => {
  if (state && action.type == "Navigation/NAVIGATE") {
    // state.key == "id-1505699800774-3" ? alert("这是screen页面") : alert("没有")
    alert("这是每一个页面");
  }
  return defaultGetStateForAction(action, state);
}

//如果你想让你的navigator作为顶层组件使用(没有navigation prop传入),
// 你可以使用createNavigationContainer.当缺少navigtion prop的时候,
// 这个工具使你的navigator看起来像一个顶层的导航组件.它将管理app的state,
// 和app级别的导航特性整合在一起,例如操作进出的链接和android的返回按钮行为.

const CustomTabs = createNavigationContainer(
  //这个工具使用标准方法把router和navigation view合并在一起
  createNavigator(CustomTabRouter)(CustomTabView)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
  },
});

export default CustomTabs;